import React from 'react';
import {Alert, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {DEVICE_WIDTH, isAndroid} from '../utils/screen';
import {hideLoading, showLoading, showToast} from '../utils/common';
import {t} from '../helpers/i18n';
import {PERMISSIONS} from 'react-native-permissions';
import {launchImageLibrary} from 'react-native-image-picker';
import {checkPermission} from '../utils/permissions';

const Samples = () => {
  const navigation = useNavigation();
  const dataSource = [
    {
      title: 'Redux计时器',
      routeName: 'Counter',
    },
    {
      title: 'Redux异步调用',
      routeName: 'Movie',
    },
    {
      title: '下拉刷新上拉加载更多',
      routeName: 'List',
    },
  ];
  const renderItem = item => {
    return (
      <TouchableOpacity
        key={item.routeName}
        style={styles.item}
        activeOpacity={0.8}
        onPress={() => navigation.navigate(item.routeName)}>
        <Text>{`${item.title}`}</Text>
      </TouchableOpacity>
    );
  };
  return (
    <View style={styles.container}>
      {dataSource.map(item => renderItem(item))}
      <TouchableOpacity
        style={styles.item}
        activeOpacity={0.8}
        onPress={() => {
          showLoading();
          setTimeout(() => {
            hideLoading();
          }, 3000);
        }}>
        <Text>{'Show Loading'}</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.item}
        activeOpacity={0.8}
        onPress={() => showToast('提示！')}>
        <Text>{'Show Toast'}</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.item}
        activeOpacity={0.8}
        onPress={async () => {
          let isGranted;
          if (isAndroid) {
            isGranted = await checkPermission(
              PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE,
            );
          } else {
            isGranted = await checkPermission(PERMISSIONS.IOS.PHOTO_LIBRARY);
          }
          if (isGranted) {
            const result = await launchImageLibrary();
            Alert.alert(JSON.stringify(result));
          }
        }}>
        <Text>{t('photos')}</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    width: DEVICE_WIDTH,
    height: 40,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 10,
  },
});

export default Samples;
